import ProTable from '@ant-design/pro-table';
import { queryStore, storeRelation } from '../service';
import React, { useState, useRef } from 'react';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

const EditStore = (props) => {
  const [count, setCount] = useState();
  const [modalVisible, handleModalVisible] = useState(false);
  const [updateModalVisible, handleUpdateModalVisible] = useState(false);
  const actionRef = useRef();
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '联系人',
      dataIndex: 'contacts',
    },
    {
      title: '操作',
      width: 100,
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => {
        return (
          <a
            onClick={() => {
              props.onSelect([record]);
            }}
          >
            添加
          </a>
        );
      },
    },
  ];
  return (
    <div style={{ width: '50%' }}>
      <ProTable
        headerTitle="店铺列表"
        actionRef={actionRef}
        rowKey="id"
        bordered
        search={{
          labelWidth: 120,
        }}
        toolBarRender={null}
        request={(params, sorter, filter) => queryStore({ ...params, sorter, filter })}
        postData={(payload) => {

          const { list, total } = payload;
          setCount(total);
          return list||[];
        }}
        pagination={{
          defaultPageSize: 10,
          total: count,
        }}
        columns={columns}
      />
    </div>
  );
};

export default EditStore;
